<template>
    <div class="inputDom" :style="myStyles">
        <input class="myInput" :placeholder="hits" v-model="inputValue" :class="isHit ? 'pd3' : ''"
            :style="leftText != '' ? { paddingRight: '45px' } : {}" @focus="showList = true; getData(inputValue)">
        <div class="leftText">{{ leftText }}</div>

        <div v-if="showList" class="overList">
            <div v-for="s in dataList" v-bind:key="s" @click="selectItem(s)" class="item">
                {{ s[key1] }}
            </div>
            <div v-if="dataList.length == 0" class="nullData">{{ $t('text.Common.l76') }}</div>
        </div>
    </div>

    <div class="overlay" v-if="showList" @click="close"></div>
</template>
    
<script>
export default {
    name: 'CommonInputSearchSelect',
    emits: ['returnData', 'clearData', 'mustCount'],
    components: {
    },
    props: {
        isShowLeftText: {
            default: false,
            type: Boolean
        },
        hit: {
            default: '',
            type: String
        },
        leftText: {
            default: '',
            type: String
        },
        myStyles: {
            default: { width: '160px' }
        },
        isMust: {
            default: false,
            type: Boolean
        },
        mustHit: {
            default: '',
            type: String
        },
        default: {
            default: ''
        },
        getData: {
            type: Function,
            required: true
        },
        dataList: {
            required: true,
            default: []
        },
        key1: {
            default: 'realName',
            type: String
        },
        key2: {
            default: 'sysUserId',
            type: String
        },
        insertKey: {
            default: 'signUserId',
            type: String
        },
        isReturnAll: Boolean
    },
    data() {
        return {
            inputValue: this.default,
            hits: this.hit,
            isHit: false,
            showList: false,
            signFlag: false,
            isReturn: true
        }
    },
    mounted() {
    },
    methods: {

        close() {
            this.showList = false;
            if (!this.signFlag) {
                this.inputValue = ''
            }
        },

        handleClick(e) {
            if (!this.$el.contains(e.target)) {
                this.showList = false
            }
        },
        inputReturn() {
            let flag = true
            if (this.isMust && !String(this.inputValue)?.trim()) {
                this.hits = this.mustHit
                this.isHit = true
                flag = false
            }
            return flag
        },
        selectItem(s) {
            this.showList = !this.showList
            this.inputValue = s[this.key1]
            this.signFlag = true

            this.isHit = false
            if (this.isReturnAll) {
                return this.$emit('returnData', s)
            } else {
                return this.$emit('returnData', { [this.insertKey]: s[this.key2] })
            }
        },
    },
    watch: {
        inputValue: {
            handler() {
                this.getData(this.inputValue)
                if (this.showList)
                    this.signFlag = false
            }
        },
        default() {
            if (this.inputValue == '' || this.inputValue == null) {
                this.inputValue = this.default
            }
        },
        hit() {
            this.hits = this.hit
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
.nullData {
    height: 100%;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item {
    display: flex;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
}

.item:hover {
    background: #eee;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.overList {
    background: white;
    position: absolute;
    top: 30px;
    width: 100%;
    height: 200px;
    z-index: 2;
    border-radius: 5px;
    box-shadow: 1px 1px 10px 5px #eee;
    overflow: auto;
    font-size: 12px;
}

.inputDom {
    display: flex;
    align-items: center;
    position: relative;
}

.myInput {
    outline: none;
    height: 20px;
    border: 1px solid rgb(220, 223, 230);
    padding-left: 8px;
    padding-right: 20px;
    border-radius: 3px;
    font-size: 12px;
    position: relative;
    margin: 1px;
    width: 100%;
}

.myInput:focus {
    border: 1px solid #6698ff;
}

.leftText {
    font-size: 12px;
    color: #999;
    position: absolute;
    right: 12px;
}

.pd3 {
    padding-left: 15px;
    padding-right: 10px;
    color: red;
    border: 1px solid red;
}

.pd3::placeholder {
    color: red;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: none;
}
</style>